<template>
	<uni-data-picker ref="mediaPlatformPicker" popup-title="请选择自媒体平台" :localdata="columns" @change="onConfirm"
		@popupclosed="onClose">
		<view />
	</uni-data-picker>
</template>

<script>
	import MediaPlatform from './mediaPlatform.json';
	//区域选择组件，该组件呈现，省、市、县三级联动，依赖uview组件库u-picker组件
	export default {
		name: 'mediaPlatform',
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				loading: false,
				columns: [],
			};
		},
		watch: {
			show: function() {
				if (this.show) {
					this.$refs.mediaPlatformPicker.show()
				} else {
					this.$refs.mediaPlatformPicker.hide()
				}
			}
		},
		mounted() {
			this.initRegion();
		},
		methods: {
			initRegion() {
				this.loading = true;
				this.columns = MediaPlatform;
				this.loading = false;
			},
			onConfirm(e) {
				if (!(e && e.detail && e.detail.value)) {
					return;
				}
				let selecteds = e.detail.value;
				let id = (() => {
					return selecteds[selecteds.length - 1].value;
				})()
				let name = (() => {
					let names = [];
					selecteds.forEach((sel) => {
						names.push(sel.text);
					});
					return names.join('/');
				})()
				this.onClose();
				this.$emit('mediaPlatform:picker', {
					id: id,
					name: name
				});
			},
			onClose() {
				this.$emit('update:show', false);
			}
		}
	};
</script>

<style lang="scss" scoped></style>